<template>
  <div class="step-panel">
    <div class="title"> 头像采集</div>
    <StepProgress :steps="['填写身份证', '采集头像', '验证结果']" :current="1" />
    <div class="video-area">
      <div class="face-frame">
        <video ref="videoRef" autoplay playsinline width="180" height="180" class="video"></video>
        <canvas ref="canvasRef" width="180" height="180" style="display:none"></canvas>
        <svg class="circle" width="180" height="180">
          <circle cx="90" cy="90" r="85" stroke="#4CAF50" stroke-width="4" fill="none" />
        </svg>
      </div>
    </div>
    <div class="btn-row">
      <button class="rec-btn" @click="capturePhoto">拍照并上传</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import StepProgress from './StepProgress.vue'

const emit = defineEmits(['next'])
const videoBlob = ref(null)
const videoRef = ref(null)
const canvasRef = ref(null)

function capturePhoto() {
  const video = videoRef.value
  const canvas = canvasRef.value
  if (!video || !canvas) {
    alert('摄像头未就绪，请稍后再试')
    return
  }
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  canvas.toBlob(async blob => {
    if (blob) {
      // 上传并分析头像
      const formData = new FormData()
      formData.append('user_id', localStorage.getItem('userid') || '1')
      formData.append('face_image', blob, 'face_image.jpg')
      try {
        const res = await fetch('http://localhost:8000/user/face-compare/', {
          method: 'POST',
          body: formData
        })
        const data = await res.json()
        if (data.success) {
          emit('next', { videoBlob: blob })
        } else {
          alert(data.msg || '人脸不一致，请重试')
        }
      } catch (e) {
        alert('网络错误或服务器异常')
      }
    }
  }, 'image/jpeg')
}

onMounted(() => {
  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    if (videoRef.value) {
      videoRef.value.srcObject = stream
    }
  })
})
</script>

<style scoped>
.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #666;
}
.video-area {
  margin: 32px 0 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.face-frame {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 18px;
}
.video {
  border-radius: 50%;
  background: #eee;
}
.circle {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
}
.face-tip {
  background: #f5f5f5;
  color: #888;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.rand-num {
  font-weight: bold;
  color: #333;
  font-size: 18px;
  background: #e0eaf6;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.btn-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 18px;
}
.rec-btn {
  background: #e53935;
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.rec-btn.gray {
  background: #bbb;
  cursor: not-allowed;
}
.rec-btn:not(.gray):hover {
  background: #b71c1c;
}
</style> 